import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useEffect, useLayoutEffect, useRef } from "./hook/index";

//! useEffect (宏任务执行) useLayoutEffect (微任务执行)
function App() {
    const box1 = useRef();
    const box2 = useRef();

    useEffect(() => {
        // 宏任务，输出后执行
        console.log("box1", box1.current);
        box1.current.style.transform = "translate(300px)"; // 可以看到动画效果
        box1.current.style.transition = "all 1s";
    }, []);
    useLayoutEffect(() => {
        // 微任务，输出先执行
        console.log("box2", box2.current);
        box2.current.style.transform = "translate(300px)"; // 看不到动画效果 (一般微任务在布局绘制之前执行)
        box2.current.style.transition = "all 1s";
    }, []);

    //! 浏览器渲染机制： 正常渲染先走宏任务 [script] [setTimeout] [promise]
    //? 先清空微任务，再去看是否页面达到了渲染时机，如果达到了渲染时机会进行页面渲染，再执行下一个宏任务
    //! useEffect会在浏览器渲染结束后执⾏, useLayoutEffect 则是在 DOM 更新完成后浏览器绘制之前执⾏

    const style = { width: "100px", height: "100px" };

    return (
        <div>
            <div ref={box1} style={{ ...style, backgroundColor: "red" }}></div>
            <div ref={box2} style={{ ...style, backgroundColor: "pink" }}></div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
